<template>
  <div class="fluid">
    <!-- AI投放内容 -->
    <div class="container">
      <div class="head">
        创建广告投放计划
      </div>
      <div class="rowOne">
        <img src="../../assets/img/创建计划/形状 1.png">
        <span>主体信息</span>
      </div>
      <div class="rowTwoContainer">
        <!-- 广告主名称 -->
        <div class="rowTwo">
          <div></div>
          <div>
            <p>广告主名称:</p>
          </div>
          <div>
            <el-input v-model="val1" placeholder="请输入广告主名称" clearable style="width:480px;">
            </el-input>
          </div>
        </div>
        <!-- 所属行业 -->
        <div class="rowTwo">
          <div></div>
          <div>
            <p>所属行业:</p>
          </div>
          <div class="select">
            <el-select v-model="val2" placeholder="请选择" style="width:480px;">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 预算金额 -->
        <div class="rowTwo">
          <div></div>
          <div>
            <p>预算金额:</p>
          </div>
          <div class="inputPosition">
            <el-input v-model="val3" placeholder="为了保障您的投放效果，建议单次智投1万元起投" style="width:480px;">
            </el-input>
            <p>元</p>
          </div>
        </div>
        <!-- 推广网址 -->
        <div class="rowTwo notitle">
          <div></div>
          <div>
            <p>推广网址:</p>
          </div>
          <div>
            <el-input v-model="val4" placeholder="http://" style="width:480px;">
            </el-input>
          </div>
        </div>
        <!-- 推广时段 -->
        <div class="rowTwo">
          <div></div>
          <div>
            <p>推广时段:</p>
          </div>
          <div>
            <el-date-picker type="datetime" placeholder="开始时间" style="width:230px;" v-model="val5">
            </el-date-picker>
            <el-date-picker type="datetime" placeholder="结束时间" style="width:230px;margin-left:20px;" v-model="val6">
            </el-date-picker>
          </div>
        </div>
        <!-- 投放时间 -->
        <div class="rowTwo notitle">
          <div></div>
          <div>
            <p>投放时间:</p>
          </div>
          <div>
            <ul class="radio">
              <li v-for="(item,index) in list1" :key="index" @click="radioPushFun1(index)">
                <img src="../../assets/img/热销媒体列表/切图/1.png" v-if="index==radioPush1">
                <img src="../../assets/img/热销媒体列表/切图/2.png" v-if="index!=radioPush1">
                <span :class="{red:radioPush1==index,white:radioPush1!=index}">{{item}}</span>
              </li>
            </ul>
          </div>
          <!-- 选择投放时间是否显示 -->
          <div v-if="radioPush1==1">
            <el-time-select :picker-options="{
                              start: '00:00',
                              step: '00:60',
                              end: '23:00'
                            }" placeholder="投放时间" style="width:230px;margin-left:50px;" v-model="val7">
            </el-time-select>
          </div>
        </div>
        <!-- 营销需求 -->
        <div class="rowTwo">
          <div></div>
          <div>
            <p>营销需求:</p>
          </div>
          <div>
            <p style="width:480px;text-align:center;">{{progress1}}%效果，{{100-progress1}}%品牌被曝光</p>
            <!-- <vue-slider ref="slider" v-model="progress1" :width="480" :height="10" 
                      :tooltip=false>
                      </vue-slider>    -->
            <el-slider v-model="progress1" :show-tooltip="false"></el-slider>
          </div>
        </div>
      </div>
      <div class="rowOne">
        <img src="../../assets/img/创建计划/形状 1.png">
        <span>目标人群属性：</span>
      </div>
      <div class="rowTwoContainer">
        <!-- 地域分布 -->
        <div class="rowTwo notitle">
          <div></div>
          <div>
            <p>地域分布:</p>
          </div>
          <div>
            <ul class="radio">
              <li v-for="(item,index) in list2" :key="index" @click="radioPushFun2(index)">
                <img src="../../assets/img/热销媒体列表/切图/1.png" v-if="index==radioPush2">
                <img src="../../assets/img/热销媒体列表/切图/2.png" v-if="index!=radioPush2">
                <span :class="{red:radioPush2==index,white:radioPush2!=index}">{{item}}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 地区二级联动地区显示 -->
        <div class="rowThree" v-if="radioPush2==1">
          <div>
            <div class="province">
              <ul>
                <li v-for="(province,index) in name" :key="index" @click="showCity(index)">
                  <div class="border" :class="{bg:demo1(index)}"></div>
                  <span class="normal" :class="{bold:demo1(index)}">{{province.provinceName}}</span>
                  <ul v-if="cityIndex==index" class="city">
                    <li v-for="(item,index) in province.citys" :key="index" @click.stop="chooseCity(index)">
                      <div class="border" :class="{bg:demo2(index)}"></div>
                      <span class="normal" :class="{bold:demo2(index)}">{{item.citysName}}</span>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 年龄 -->
        <div class="rowTwo notitle">
          <div></div>
          <div>
            <p>年龄:</p>
          </div>
          <div>
            <p style="width:480px;">{{progress2[0]}}到{{progress2[1]}}之间</p>
            <el-slider v-model="progress2" range :max="60" :show-tooltip="false"></el-slider>
          </div>
        </div>
        <!-- 性别 -->
        <div class="rowTwo notitle">
          <div></div>
          <div>
            <p>性别:</p>
          </div>
          <div>
            <ul class="radio">
              <li v-for="(item,index) in listSex" :key="index" @click="radioPushFun3(index)">
                <img src="../../assets/img/热销媒体列表/切图/1.png" v-if="index==radioPush3">
                <img src="../../assets/img/热销媒体列表/切图/2.png" v-if="index!=radioPush3">
                <span :class="{red:radioPush3==index,white:radioPush3!=index}">{{item}}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 学历 -->
        <div class="rowTwo notitle">
          <div></div>
          <div>
            <p>学历:</p>
          </div>
          <div>
            <ul class="radio">
              <li v-for="(item,index) in listEdu" :key="index" @click="radioPushFun4(index)">
                <img src="../../assets/img/热销媒体列表/切图/1.png" v-if="index==radioPush4">
                <img src="../../assets/img/热销媒体列表/切图/2.png" v-if="index!=radioPush4">
                <span :class="{red:radioPush4==index,white:radioPush4!=index}">{{item}}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 社会角色 -->
        <div class="rowTwo notitle">
          <div></div>
          <div>
            <p>社会角色:</p>
          </div>
          <div>
            <ul class="radio">
              <li v-for="(item,index) in listPosition" :key="index" @click="radioPushFun5(index)">
                <img src="../../assets/img/热销媒体列表/切图/1.png" v-if="index==radioPush5">
                <img src="../../assets/img/热销媒体列表/切图/2.png" v-if="index!=radioPush5">
                <span :class="{red:radioPush5==index,white:radioPush5!=index}">{{item}}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 收入水平 -->
        <div class="rowTwo notitle">
          <div></div>
          <div>
            <p>收入水平:</p>
          </div>
          <div>
            <ul class="radio">
              <li v-for="(item,index) in listSalary" :key="index" @click="radioPushFun6(index)">
                <img src="../../assets/img/热销媒体列表/切图/1.png" v-if="index==radioPush6">
                <img src="../../assets/img/热销媒体列表/切图/2.png" v-if="index!=radioPush6">
                <span :class="{red:radioPush6==index,white:radioPush6!=index}">{{item}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <button @click="pro" class="pro">生成投放方案</button>
    </div>
    <!-- 弹出层 -->
    <div class="fluid1" :class="{bgfff:bgfff}" v-if="show1">
      <div class="alert">
        <p class="alertp1">填写信息后即可免费获取投放方案</p>
        <img src="../../assets/img/alert/8.png" alt="" class="cancel" @click="cancel">
        <div v-if="ssfyyzz">
          <p>
            <button class="sfz" @click="showsfz">填写身份证号获取方案</button>
          </p>
          <button class="sfztitle">可免费获取一次方案</button>
          <p>
            <button class="yyzz" @click="showyyzz">填写统一社会信用代码（营业执照）获取方案</button>
          </p>
          <button class="yyzztitle">可免费获取三次方案</button>
        </div>
        <div v-if="ssfshow">
          <p><input type="text" placeholder="请输入18位身份证号码" class="commonInput" v-model="ssfvalue"></p>
          <p>
            <button class="commonBtn" @click="submitssf">提交</button>
          </p>
        </div>
        <div v-if="yyzzshow">
          <p><input type="text" placeholder="请输入上营业执照上18位统一社会信用代码（必填）" class="commonInput" v-model="zzyyvalue"></p>
          <p>
            <button class="commonBtn" @click="submitzzyy">提交</button>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const img1 = require("../../assets/img/热销媒体列表/切图/1.png");
const img2 = require("../../assets/img/热销媒体列表/切图/2.png");
import vueSlider from "vue-slider-component";
// import func from './vue-temp/vue-editor-bridge';
export default {
  data() {
    return {
      resultDetail:"",
      ssfyyzz: true,
      ssfshow: false,
      yyzzshow: false,
      bgfff: true,
      show1: false,
      ssfvalue: "",
      zzyyvalue: "",
      // 广告主名称
      val1: "",
      // 所属行业
      val2: "",
      // 预算金额
      val3: "",
      // 推广网址
      val4: "",
      // 推广时段开始时间：
      val5: "",
      // 推广时段结束时间：
      val6: "",
      // 选择投放时间
      val7: "",
      // 全天投放时间
      val8: "全天投放",
      radioPush1: 0,
      val9: "不限",
      valEdu: "不限",
      radioPush2: 0,
      radioPush3: "",
      radioPush4: "",
      radioPush5: "",
      radioPush6: "",
      options: [
        {
          value: "金融",
          label: "金融"
        },
        {
          value: "电商",
          label: "电商"
        },
        {
          value: "游戏",
          label: "游戏"
        },
        {
          value: "旅游休闲",
          label: "旅游休闲"
        },
        {
          value: "科技通讯",
          label: "科技通讯"
        },
        {
          value: "体育运动",
          label: "体育运动"
        },
        {
          value: "母婴",
          label: "母婴"
        },
        {
          value: "教育",
          label: "教育"
        },
        {
          value: "医疗保健",
          label: "医疗保健"
        },
        {
          value: "房地产",
          label: "房地产"
        },
        {
          value: "汽车",
          label: "汽车"
        },
        {
          value: "美容",
          label: "美容"
        },
        {
          value: "快消百货",
          label: "快消百货"
        },
        {
          value: "其他",
          label: "其他"
        }
      ],
      list1: ["全天投放", "在指定的时间内投放"],
      list2: ["不限", "指定地区"],
      liIndex: 0,
      // 营销需求滑动块一
      progress1: 57,
      // 年龄滑块二
      progress2: [18, 50],
      // 投放时间
      toufang: "",
      originCity: "",
      valsex: "不限",
      valPosition: "不限",
      valSalary: "不限",
      listSex: ["不限", "男", "女"],
      listEdu: ["不限", "博士及以上", "硕士", "本科", "高中及以下"],
      listPosition: [
        "不限",
        "工薪者",
        "家庭主妇",
        "企业家",
        "高层管理",
        "中层管理",
        "创业者",
        "投资者",
        "个体商户",
        "学生",
        "退休者",
        "其他"
      ],
      listSalary: [
        "不限",
        "年收入8万以上",
        "年收入8-15万",
        "年收入15-30万",
        "年收入30-100万",
        "年收入100-300万",
        "年收入300-1000万",
        "年收入1000万以上"
      ],
      liIndex: 0,
      name: [],
      cityIndex: 0,
      arr1: [0],
      arr2: [0],
      userinfoid: "",
      ssfreg: /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/,
      yyzzreg: /^(?:(?![IOZSV])[\dA-Z]){2}\d{6}(?:(?![IOZSV])[\dA-Z]){10}$/,
      target: "",
      // 通过路由传递给生成方案页面，获取生成方案页面的内容
      id: "",
      a: "",
      b: "",
      resultWay: "",
      arrNull: []
    };
  },
  methods: {
    radioPushFun1(index) {
      this.radioPush1 = index;
      if (this.radioPush1 == 0) {
        this.val8 = "全天投放";
      } else {
        this.val8 = "";
      }
    },
    radioPushFun2(index) {
      this.radioPush2 = index;
      if (this.radioPush2 == 1) {
        this.val9 = "";
        this.$ajax.get("../../../static/city.json").then(response => {
          this.name = response.data.provinces;
        });
      } else {
        this.val9 = "不限";
      }
    },
    radioPushFun3(index) {
      this.radioPush3 = index;
      this.valsex = this.listSex[index];
    },
    radioPushFun4(index) {
      this.radioPush4 = index;
      this.radioPush4 = index;
      this.valEdu = this.listEdu[index];
    },
    radioPushFun5(index) {
      this.radioPush5 = index;
      this.radioPush5 = index;
      this.valPosition = this.listPosition[index];
    },
    radioPushFun6(index) {
      this.radioPush6 = index;
      this.radioPush6 = index;
      this.valSalary = this.listSalary[index];
    },
    showCity(index) {
      this.cityIndex = index;
      if (this.arr1.indexOf(index) == -1) {
        this.arr1.push(index);
      } else {
        this.arr1.splice(this.arr1.indexOf(index), 1);
      }
    },
    chooseCity(index) {
      if (this.arr2.indexOf(index) == -1) {
        this.arr2.push(index);
      } else {
        this.arr2.splice(this.arr2.indexOf(index), 1);
      }
    },
    demo1(index) {
      if (this.arr1.indexOf(index) != -1) {
        return true;
      } else {
        return false;
      }
    },
    demo2(index) {
      if (this.arr2.indexOf(index) != -1) {
        return true;
      } else {
        return false;
      }
    },
    async pro() {
      // 先验证是否登录，在验证数据填写的格式是否正确，然后显示填写身份证或者营业执照
      if (
        window.sessionStorage.getItem("userInfo") ||
        window.localStorage.getItem("userInfo")
      ) {
        // this.userinfoid = JSON.parse(
        //   window.sessionStorage.getItem("userInfo")
        // ).userId;
        this.a = JSON.parse(window.sessionStorage.getItem("userInfo")).mobile;
        this.b = JSON.parse(window.sessionStorage.getItem("userInfo")).userId;
        if (this.val1 == "") {
          this.$message.error("广告主名称不能为空");
        } else if (this.val2 == "") {
          this.$message.error("所属行业必须有所选择");
        } else if (this.val3 == "") {
          this.$message.error("预算金额请进行填写");
        } else if (this.val5 == "") {
          this.$message.error("选择推广开始时间不能为空");
        } else if (this.val6 == "") {
          this.$message.error("选择推广结束时间不能为空");
        } else {
          this.loadResultWay();
          this.getCardYyzz();
          console.log(this.resultDetail)
          if (this.resultWay.length >= 4) {
            this.$message.error("每个人最多有四个方案");
          } else {
            // 初次判断从哪里进去
            // idCard数量
            // var idCardNum = 0;
            // businessNumber数量
            // var busNum = 0;
            // if(this.resultDetail.idCard&&this.resultDetail.businessNumber){

            // }
            // for (let i = 0; i < this.resultWay.length; i++) {
            //   if (this.resultWay[i].idCard) {
            //     idCardNum++;
            //   }
            //   if (this.resultWay[i].businessNumber) {
            //     busNum++;
            //   }
            //   if (idCardNum == 1 && busNum < 3) {
            //     this.yyzzshow = true;
            //   } else if (idCardNum == 0 && busNum == 3) {
            //     this.ssfshow = true;
            //   }
            // }
            this.show1 = true;
          }
          // 判断有几个方案 身份证有一个，营业执照号3个
        }
      } else {
        this.$confirm("检测到您并没有登录", "warning", {
          confirmButtonText: "立即登录",
          cancelButtonText: "不了，谢谢",
          type: "warning"
        }).then(() => {
          this.$router.push("/login");
        });
      }
    },
    // 读取方案个数
    async loadResultWay() {
      await this.$ajax
        .post(this.Ipurl + "aiInfo/queryByUserId?userId=" + this.b)
        .then(res => {
          if (res.data.returnCode == 1000) {
            this.resultWay = res.data.dataInfo;
          } else {
            this.$message.error("服务器异常，请重试");
          }
        });
    },
    cancel() {
      this.show1 = false;
      this.ssfshow = false;
      this.yyzzshow = false;
      this.ssfyyzz = true;
    },
    showsfz() {
      this.ssfyyzz = false;
      this.ssfshow = true;
      this.yyzzshow = false;
    },
    showyyzz() {
      this.ssfyyzz = false;
      this.ssfshow = false;
      this.yyzzshow = true;
    },
    // 通过mobile获取身份证信息
    async getMessage() {
      await this.$ajax
        .post(this.Ipurl + "user/getUserByPhone" + "?mobile=" + this.a)
        .then(res => {
          this.result = res.data.dataInfo;
        });
    },
    //获取身份证号和营业执照
    async getCardYyzz() {
      await this.$ajax
        .post(this.Ipurl + "user/selectByUserId" + "?userId=" + this.b)
        .then(res => {
          this.resultDetail = res.data.dataInfo;
        });
    },
    async submitssf() {
      if (this.ssfvalue == "") {
        this.$message.error("身份证不能为空");
      } else if (!this.ssfreg.test(this.ssfvalue)) {
        this.$message.error("身份证格式不对");
        // this.ssfvalue = "";
      } else {
        this.val8 == ""
          ? (this.toufang = this.val7)
          : (this.toufang = this.val8);
        this.val9 == ""
          ? (this.originCity = this.val8)
          : (this.originCity = this.val9);
        var d = new Date(this.val5);
        var b =
          d.getFullYear() +
          "年" +
          (d.getMonth() + 1) +
          "月" +
          d.getDate() +
          "日";
        var a = new Date(this.val6);
        var c =
          a.getFullYear() +
          "年" +
          (a.getMonth() + 1) +
          "月" +
          a.getDate() +
          "日";
        // this.loadResultWay();
        this.getCardYyzz()
        for (let i = 0; i < this.resultWay.length; i++) {
          if (this.resultWay[i].idCard) {
            this.arrNull = this.arrNull.push(this.resultWay[i].idCard);
          }
        }
        if (this.resultDetail) {
          this.$message.error("您已经使用该身份证注册过了");
        } else {
          await this.$ajax
            .post(this.Ipurl + "aiInfo/save", {
              userId: this.userinfoid,
              name: this.val1,
              industryInvolved: this.val2,
              budget: this.val3,
              src: this.val4,
              startTime: b,
              time: b + "~" + c,
              timeToMarket: this.toufang,
              marketingNeeds: this.progress1,
              targetTerritory: this.originCity,
              targetAgeStart: this.progress2[0],
              targetAgeEnd: this.progress2[1],
              targetSex: this.valsex,
              targetEducationBackground: this.valEdu,
              targetRole: this.valPosition,
              targetIncomeLevel: this.valSalary,
              target: this.target,
              idCard: this.ssfvalue
            })
            .then(res => {
              if (res.data.returnCode == 1000) {
                this.id = res.data.dataInfo.id;
                this.$router.push({
                  path: "/emitPlan",
                  query: { id: this.id }
                });
              } else {
                this.$message.error("请重试");
              }
            });
        }
      }
    },
    async submitzzyy() {
      if (this.yyzzvalue == "") {
        this.$message.error("营业执照号不能为空");
      } else if (!this.yyzzreg.test(this.yyzzvalue)) {
        this.$message.error("营业执照号格式不对");
        // this.yyzzvalue = "";
      } else {
        this.val8 == ""
          ? (this.toufang = this.val7)
          : (this.toufang = this.val8);
        this.val9 == ""
          ? (this.originCity = this.val8)
          : (this.originCity = this.val9);
        var d = new Date(this.val5);
        var b =
          d.getFullYear() +
          "年" +
          (d.getMonth() + 1) +
          "月" +
          d.getDate() +
          "日";
        var a = new Date(this.val6);
        var c =
          a.getFullYear() +
          "年" +
          (a.getMonth() + 1) +
          "月" +
          a.getDate() +
          "日";
        // this.loadResultWay();
        this.getCardYyzz()
        // for (let i = 0; i < this.resultWay.length; i++) {
        //   if (this.resultWay[i].businessNumber) {
        //     this.arrNull = this.arrNull.push(this.resultWay[i].businessNumber);
        //   }
        // }
        if (this.resultDetail.businessNumber) {
          this.$message.error("您已经使用该营业执照号注册过了");
        } else {
          await this.$ajax
            .post(this.Ipurl + "aiInfo/save", {
              userId: this.userinfoid,
              name: this.val1,
              industryInvolved: this.val2,
              budget: this.val3,
              src: this.val4,
              startTime: b,
              time: b + "~" + c,
              timeToMarket: this.toufang,
              marketingNeeds: this.progress1,
              targetTerritory: this.originCity,
              targetAgeStart: this.progress2[0],
              targetAgeEnd: this.progress2[1],
              targetSex: this.valsex,
              targetEducationBackground: this.valEdu,
              targetRole: this.valPosition,
              targetIncomeLevel: this.valSalary,
              target: this.target,
              businessNumber: this.yyzzvalue
            })
            .then(res => {
              if (res.data.returnCode == 1000) {
                console.log(res.data, "createAiplan");
                this.id = res.data.dataInfo.id;
                this.$router.push({
                  path: "/emitPlan",
                  query: { id: this.id }
                });
              } else {
                this.$message.error("请重试");
              }
            });
        }
      }
    }
  },
  components: {
    vueSlider
  },
  mounted() {
    this.$message("红色*即为必填项");
    this.target = this.$route.query.name;
    // 只有登录之后才有此功能
  },
  created: function(){
    
  }
};
</script>
<style scoped>
.fluid {
  width: 100%;
}
.container {
  width: 1200px;
  margin: 0 auto;
}
.fluid1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0.8;
}
.alert {
  width: 800px;
  height: 300px;
  background: url("../../assets/img/alert/1.png");
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -400px;
  margin-top: -150px;
  text-align: center;
}
.alertp1 {
  font-size: 24px;
  color: rgb(34, 34, 34);
  font-weight: bold;
  margin-top: 40px;
}
.cancel {
  position: absolute;
  top: -20px;
  right: -20px;
  cursor: pointer;
}
.sfz {
  width: 400px;
  height: 40px;
  border-radius: 10px;
  margin-top: 40px;
  font-size: 16px;
}
.yyzz {
  width: 400px;
  height: 40px;
  border-radius: 10px;
  margin-top: 38px;
  font-size: 16px;
}
.sfztitle {
  position: absolute;
  width: 170px;
  height: 20px;
  border-radius: 20px;
  top: 140px;
  right: 200px;
  border: 1px solid red;
  font-size: 13px;
}
.yyzztitle {
  position: absolute;
  width: 170px;
  height: 20px;
  border-radius: 20px;
  top: 220px;
  right: 200px;
  border: 1px solid red;
  font-size: 13px;
}
.commonInput {
  width: 400px;
  height: 40px;
  margin-top: 70px;
  color: rgb(222, 222, 222);
  padding-left: 20px;
  border: 1px solid gray;
}
.commonBtn {
  width: 80px;
  height: 30px;
  background: red;
  color: #fff;
  margin-top: 40px;
}
.head {
  height: 40px;
  background: url("../../assets/img/创建计划/切换.png");
  text-align: center;
  line-height: 30px;
  font-size: 16px;
  color: #fff;
  margin-top: 60px;
}
.rowOne {
  overflow: hidden;
  margin-top: 20px;
}
.rowOne > img {
  margin-left: 30px;
}
.rowOne > span {
  margin-left: 4px;
  font-size: 16px;
  color: rgb(34, 34, 34);
  font-weight: bold;
}
.rowTwoContainer {
  width: 100%;
  padding-left: 42px;
  margin-top: 45px;
}
.rowTwo {
  overflow: hidden;
  margin-top: 35px;
}
.rowTwo > div:nth-child(1) {
  float: left;
  width: 9px;
  height: 10px;
  background: url("../../assets/img/创建计划/星号.png");
  margin-top: 5px;
}
.rowTwo > div:nth-child(2) {
  float: left;
  width: 125px;
  margin-left: 5px;
}
.rowTwo > div:nth-child(2) > p {
  font-size: 16px;
  color: rgb(34, 34, 34);
}
.rowTwo > div:nth-child(3) {
  float: left;
}
.rowTwo > div:nth-child(3) > input {
  width: 480px;
  height: 38px;
  border: 1px solid gray;
  border-radius: 5px;
  padding-left: 30px;
  font-size: 16px;
  color: rgb(217, 218, 221);
}
.select,
.inputPosition {
  position: relative;
}
.select img {
  position: absolute;
  top: 14px;
  left: 450px;
}
.inputPosition p {
  position: absolute;
  top: 10px;
  left: 450px;
  font-size: 16px;
  color: rgb(34, 34, 34);
}
.notitle > div:nth-child(1) {
  background: none;
}
.red {
  color: red;
}
.white {
  color: rgb(34, 34, 34);
}
.radio {
  overflow: hidden;
}
.radio li {
  float: left;
  cursor: pointer;
  width: 180px;
  padding-bottom: 20px;
}
.radio span {
  font-size: 16px;
  margin-left: 5px;
}
.rowThree {
  position: relative;
  margin-top: 30px;
  margin-left: 150px;
}
.rowThree > div {
  position: relative;
}
.province {
  width: 762px;
  height: 332px;
  border-radius: 20px;
  border: 1px solid gray;
}
.province > ul {
  margin-left: 10px;
}
.province > ul > li {
  float: left;
  width: 123px;
  text-align: center;
  margin-top: 30px;
  cursor: pointer;
}
.province > ul div:nth-child(1) {
  float: left;
  width: 20px;
  height: 20px;
}
.province > ul span {
  float: left;
  font-size: 16px;
  margin-left: 10px;
  margin-top: -2px;
}
.province > ul div.border {
  border: 1px solid gray;
  background: none;
}
.province > ul div.bg {
  background: url("../../assets/img/登陆注册/登录/√2.png");
  border: none;
}
.province > ul span.normal {
  font-weight: normal;
}
.province > ul span.bold {
  font-weight: bolder;
}
.city {
  position: absolute;
  width: 382px;
  border: 1px solid gray;
  border-radius: 20px;
  top: 130px;
  right: 25px;
  background: #fff;
}
.city > li {
  float: left;
  width: 123px;
  text-align: center;
  margin-top: 30px;
  cursor: pointer;
  padding-left: 10px;
}
.city > li:last-child {
  margin-bottom: 30px;
}
.pro {
  width: 198px;
  height: 58px;
  background: #ee4041;
  color: #fff;
  font-size: 16px;
  border-radius: 50px;
  margin-left: 50px;
  margin-top: 50px;
}
</style>


